<template>
	<view class="main">
		<view class="title"></view>
		<view class="row">
			<view :class="[tagIndex==index?'tag-y ':'tag-n']" v-for="(item,index) in category" @click="clickTag(index)">{{ item.name}}</view>
		</view>
		<view class="video" v-for="(item,index) in data" :key="index" @click="goDetail(item.id)">
			<video class="video" :src="item.path" :controls="controls" />
			<image src="../../../static/images/video-play.png" class="icon" @click.native.stop="playVideo(item.path)"></image>
			<view class="text">{{item. title}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				    tagIndex: 0
				      , data: []
				      , category: []
				      , parkCategory: ''
					  ,controls:false
			}
		},
		mounted() {
				    this.getCategory()
				    this.getData()
		},
		methods: {
			  playVideo(url) {
			      window.open(url, '_blank')
			    }
			    , clickTag(index) {
			      this.tagIndex = index
			      this.parkCategory = this.category[index].code
			      this.getData()
			    }
			    , goDetail(id) {
			      console.log('goDetailgoDetail', id)
			      this.$emit('goVideoDetail', id)
			    }
			    , async getCategory() {
					let res = await this.$req({
						url: `/mng/dictionary/cache/lowerTree/parkCategory`,
						method:'get',
					})
					
			      if (res.code == 200) {
			        this.category = res.data
			      }
			    }
			    , async getData() {
					let res = await this.$req({
						url: `/palm_peninsula/video/queryBasicJoinPark`,
						method:'get',
						data:{
							 page: 1, limit: -1, sortField: 'create_time', parkCategory: this.parkCategory
						}
					})
			      if (res.code == 200) {
			        this.data = res.data
				
			      }
			    }
		}
	}
</script>

<style lang="scss">
	
	/*video默认全屏按钮*/
	    video::-webkit-media-controls-fullscreen-button{ display: none !important; }
	 
	    /*video默认aduio音量按钮*/
	    video::-webkit-media-controls-mute-button { display: none !important;}
	 
	    /*video默认setting按钮*/
	    video::-internal-media-controls-overflow-button{ display: none !important;}
	 
	    /*腾讯云点播禁用firefox全屏、设置按钮*/
	    .trump-button[sub-component="fullscreen_btn"],.trump-button[now="fullscreen"]{ display:none!important;}
	    .trump-button[sub-component="setting"]{ display:none !important;}
	 
	/*禁用video的controls（要慎重！不要轻易隐藏掉，会导致点击视频不能播放）*/
	video::-webkit-media-controls {
	  display:none !important;
	}
</style>

<style lang="scss" scoped>
	

	
	body{
		background-color: white;
	}
	.main{
		display: flex;
		flex-direction: column;
		width: 100%;
		background-color: white;
	}
	.title{
		margin-left: 24rpx;
		margin-top: 60rpx;
		font-size: 48rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 48rpx;
	}
	
	.row{
		margin-right: 24rpx;
		margin-left: 24rpx;
		margin-top: 48rpx;
		display: flex;
		overflow-x: scroll;
		width: calc(100% - 48rpx);	
	}
	
	.tag-y{
		flex-shrink: 0;
		padding-left: 32rpx;
		padding-right: 32rpx;
		height: 80rpx;
		background: #D33330;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 42px;
		margin-right: 24rpx;
	}
	.tag-n{
		margin-right: 24rpx;
			flex-shrink: 0;
		padding-left: 32rpx;
	padding-right: 32rpx;
		height: 80rpx;
		background: #F7F7F7;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #50565E;
		line-height: 48rpx;
	}
	
	.video{
		margin-top: 32rpx;
		width: calc(100% - 48rpx);
		height: 800rpx;
		border-radius: 4rpx;
		position: relative;
	}
	
	.icon{
		width: 96rpx;
		height: 96rpx;
		position: absolute;
		top: 80rpx;
		left: 40rpx;
	}
	
	.text{
		left: 40rpx;
		bottom: 1rpx;
		position: absolute;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36px;
	}
	
</style>
